<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!-- 访问的基本路径,此页面的所有的跳转都是基于此地址作为基本地址 -->
<base href="<%=basePath%>">


<meta charset="utf-8" />
<title></title>
<!--主题样式-->
<link rel="stylesheet" type="text/css"
	href="resources/easyui/themes/default/easyui.css">
<!--图标样式-->
<link rel="stylesheet" type="text/css"
	href="resources/easyui/themes/icon.css">
<!--jquery文件-->
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<!--easyui的核心js-->
<script type="text/javascript"
	src="resources/easyui/jquery.easyui.min.js"></script>
<!-- 引入中文文件 -->
<script type="text/javascript"
	src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {

		$("#myDataGrid").datagrid({
			url : 'role/roleList.do',
			pagination : true,
			singleSelect: true,//只能选中一行
			/* pageSize : 2,
			pageList : [ 2, 4, 6 ], */
			fit : true,
			//title:'模块列表',
			fitColumns : true, //让对应的列按照比例设置宽度 ,如果不设置此属性,表头设置width就是固定宽度
			toolbar : "#toolbar",
		})
		
		/* 设置已有全选的属性 */
		$("#myPower").datagrid({
			fitColumns : true,
			singleSelect: true,//只能选中一行
			onDblClickRow:function(rowIndex, rowData){
				$("#myPower").datagrid("deleteRow",rowIndex);
			}
		})
		
		/* 设置所有权限的datagrid */
		$("#allPower").datagrid({
			pagination:true,
			singleSelect: true,//只能选中一行
			url:"role/getAllPower.do",
			fitColumns : true,
			onDblClickRow:function(rowIndex, rowData){
				//获取我的权限的所有的行数据
				var rows = $("#myPower").datagrid("getRows");
				
				//需要被选中的索引
				var index = -1;
				//是否拥有权限标识
				var flag = false;
				for(var i= 0;i<rows.length;i++){
					//获取每行的数据
					var row = rows[i];
					//判断行的数据和所有权限选中的数据id是否相等,如果相等,说明已经有此权限,选中对应的行即可
					if(row.power_id == rowData.power_id){
						index = i;
						flag = true;
						break;
					}
				}
				if(flag){
					//选中已有的权限
					$("#myPower").datagrid("selectRow",index);
				}else{
					//将选中行的数据插入的我的权限对应datagrid中
					$("#myPower").datagrid("appendRow",rowData);
				}
			}
		})
		
		//获取 权限datagrid的分页条
		var pager = $('#allPower').datagrid('getPager');	
		//设置分页条显示的样式
		pager.pagination({
			showRefresh:false,
			displayMsg:"",
			showPageList:false
		});
		
		$("#myDialog").dialog({
			buttons:"#dialogButtons",
		})

	});

		//使用json对象封装页面的所有js函数
	var cmdObj = {
		//新增打开对话框
		openDialog : function() {
			$("#myDialog").dialog("open");
			$("#myDialog").dialog("setTitle","新增角色");
			//清除角色数据
			$("#role_name").val("");
			
			//var json = {rows:[]}
			//使用datagrid 的reload 方法,加载本地数据，旧的行将被移除。
			//加载一个空数据
			$("#myPower").datagrid("loadData",{rows:[]});
			
		},
		//保存更新角色
		saveOrUpdateRole : function() {
			
			//获取角色id
			var role_id = $("#role_id").val();
			
			var url = "";
			if(role_id != ""){
				url = "role/updateRole.do"
			}else{
				url = "role/addRole.do";
			}
			
			$('#roleForm').form('submit', {   
			    url:url,    
			    onSubmit: function(param){    
			       //在表单提交之前做相关操作:再自定义传递参数
			    	var rows = $("#myPower").datagrid("getRows");
			    
					if(rows.length == 0){
						$.messager.alert("温馨提示","亲,最少分配一个权限!!",'warning'); 
						return false;
					}
					//循环所有分配的权限,获取权限 power_action,使用逗号拼接起来
					//如 : role/addRole.do,role/rolePage.do 
					
					var role_action = "";
					for(var i= 0;i<rows.length;i++){
						//获取每行的数据
						var row = rows[i];
						console.log(row);
						
						role_action += row.power_action +","
					}
			    	//去掉最后一个逗号
			    	role_action = role_action.substring(0,role_action.length-1);
			    	console.log(role_action);
			    	//把拼接的权限字符串作为参数提交
			    	param.role_action = role_action;
			       return true;
			    },    
			    success:function(data){    
			        data = eval("("+data+")");
			    	if(data.code == 1){
			    		$.messager.alert("温馨提示",data.msg,'info');  
			    		//关闭对话框
			    		$("#myDialog").dialog("close");	
			    		//重新加载datagrid
			    		$("#myDataGrid").datagrid("reload");
			    		
			    	}else{
			    		$.messager.alert("温馨提示",data.msg,'error'); 
			    	}
			    	
			    }    
			}); 
		},
		del:function(){
			//1.获取选中行的数据 (json对象)
			var rowData = $("#myDataGrid").datagrid("getSelected");
			if(rowData == null){
				$.messager.alert("温馨提示","请选择需要删除的行",'warning'); 
				return;
			}
			//提示用户是否删除
			$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
			    if (r){    
			    	//2.获取选中行中数据的id
					var role_id = rowData.role_id;
					//3向后台发送ajax请求删除数据
					$.get("role/deleteRoleById.do",{"role_id":role_id},function(data){
						if(data.code == 1){
				    		$.messager.alert("温馨提示",data.msg,'info');  
				    		//重新加载datagrid
				    		$("#myDataGrid").datagrid("reload");
				    		
				    	}else{
				    		$.messager.alert("温馨提示",data.msg,'error'); 
				    	}
					});
			    }    
			});  
		},
		editRole:function(){
			//1.获取选中行的数据 (json对象)
			var rowData = $("#myDataGrid").datagrid("getSelected");
			if(rowData == null){
				$.messager.alert("温馨提示","请选择需要修改的行",'warning'); 
				return;
			}
			
			//会显表单数据: 调用表单的load方法
			$("#roleForm").form("load",rowData);
			
			//打开对话框
			$("#myDialog").dialog("open");	
			//设置标题
			$("#myDialog").dialog("setTitle","编辑角色");
			console.log(rowData)
			//设置我的权限,从后台查询我权限数据,并封装成datagrid需要的数据返回
			$("#myPower").datagrid({
				url:"role/myPower.do?role_action="+rowData.role_action
			})
		}
	}
</script>


<!-- 添加角色对话框 -->
<div id="myDialog" class="easyui-dialog"
	data-options="width:610,height:430,closed:true">
	<form id="roleForm"  action="" method="post">
		<table style="margin-top: 10;" align="center">
			<tr>
				<td>
					 角色名称: <input id="role_name" name="role_name" class="easyui-validatebox" data-options="{required:true}">
				<td>
				<td><input type="hidden" id="role_id" name="role_id"></td>
			</tr>
			<tr>
				<td>
					<!-- 自身权限 -->
					<table id="myPower" style="width: 300px;height:300px" class="easyui-datagrid"
						data-options="{'title':'已有权限',fit:true}">
						<thead>
							<th data-options="field:'power_name',width:1">权限名称</th>
						</thead>
						</table>
				</td>
				<td>
					<!-- 所有权限 -->
					<table id="allPower" style="width: 300px;height:300px" class="easyui-datagrid"
						data-options="{'title':'所有权限'}">
						<thead>
							<th data-options="field:'power_name',width:1">权限名称</th>
						</thead>
						</table>
				</td>
			</tr>
		</table>

	</form>

</div>

<!-- 对话框底部的工具条 -->
<div id="dialogButtons">
	<a onclick="cmdObj.saveOrUpdateRole();" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">保存</a>
	<a onclick="closeDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>


<!-- datagird 顶部工具条 -->
<div id="toolbar">
	<a onclick="cmdObj.openDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-add',plain:true}">新增</a> 
	<a onclick="cmdObj.editRole();" class="easyui-linkbutton" data-options="{iconCls:'icon-edit',plain:true}">修改</a> 
	<a onclick="cmdObj.del();" class="easyui-linkbutton" data-options="{iconCls:'icon-remove',plain:true}">删除</a>
	<a class="easyui-linkbutton" data-options="{iconCls:'icon-reload',plain:true}">刷新</a>
</div>



<!-- datagrid 组件 -->
<table id="myDataGrid" class="easyui-datagrid">
	<thead>
		<tr>
			<th data-options="field:'role_id',width:1">序号</th>
			<th data-options="field:'role_name',width:1">角色名称</th>
			<th data-options="field:'role_action',width:1">角色对应权限路径</th>
		</tr>
	</thead>
</table>